

<template>
  <div  class="rule-wrap">
      <!--头部切换-->
      <u-tab :options="uTabList" v-on:listenTabIndex="showTabIndex"></u-tab>

      <div v-if="tabIndex == 0">
          <img  src='http://img.uuuda.com/mine/bean_rule1.png' class='bean-rule' />
      </div>
      <div v-if="tabIndex == 1">
          <img src='http://img.uuuda.com/mine/bean_rule2.png' class='bean-rule' />
      </div>
      <div v-if="tabIndex == 2">
          <img  src='http://img.uuuda.com/mine/bean_rule3.png' class='bean-rule' />
      </div>
  </div>

</template>

<script>
    import uTab from "../../Commons/tab/index"


    export default {
        components: {
            "u-tab":uTab
        },


        data() {
            return {
                uTabList:{
                    tabList:[
                        {index:0,name:'如何使用'},
                        {index:1,name:'如何获得'},
                        {index:2,name:'减扣规则'},
                    ]
                },
                tabIndex:0,
            }
        },
        created() {
        },
        mounted(){

        },
        watch:{
        },
        methods: {
            //头部切换点击
            showTabIndex:function(data){
                let self=this;
                console.log('接受的值')
                console.log(data)
                self.tabIndex=data

            },


        }
    }
</script>

<style>

    .rule-wrap{
        background: white;
        padding-top: 60px;
        position: absolute;
        padding-bottom: 100px;
        height: 100%;
        width: 100%;
    }

    .bean-rule{
        display:block;
        width: 100%;
        margin: 0 auto;
    }
    .bean-rule-wrap{
        padding-top: 42px;
        padding-bottom: 20px;
    }
</style>


